<template>
  <!-- 搜索页面 -->
  <div class="result-container">
    <div class="title-wrap">
      <!-- 标题 -->

      <h2 class="title">{{$route.query.q}}</h2>
      <span class="sub-title">找到{{count}}</span>
    </div>

    <el-tabs v-model="activeIndex" class="el-table__row">
      <el-tab-pane label="单曲" name="single">

        <el-table :data="single" style="width: 1000px;" @row-dblclick="handdle">
          <el-table-column type="index" width="122">
          </el-table-column>
          <el-table-column prop="name" label="音乐标题" width="180">
          </el-table-column>
          <el-table-column prop="artists[0].name" label="歌手" width="180">
          </el-table-column>
          <el-table-column prop="album.name" label="专辑">
          </el-table-column>
          <el-table-column prop="duration" label="时长">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="歌手" name="singer">
        <table class="el-table">
          <div class="singer" v-for="(item,index) in singer" :key="index"  @click="toSinger(item.id)">
            <img :src="item.picUrl" alt="">
            <p>{{item.name}}</p>
          </div>
          <div class="d"></div>
        </table>
      </el-tab-pane>
      <el-tab-pane label="专辑" name="album">
        <table class="el-table">
          <div class="album" v-for="(item,index) in album" :key="index" >
            <img :src="item.picUrl" alt="">
            <p>{{item.name}}</p>
            <p class="name">{{item.artists[0].name}}</p>
          </div>
          <div class="d"></div>
        </table>
      </el-tab-pane>
      <el-tab-pane label="视频" name="video">
        <table class="el-table">
          <div class="video" v-for="(item,index) in video" :key="index" @click="toMV(item.vid)">
            <img :src="item.coverUrl" alt="">
            <p>{{item.title | ellipsis}}</p>
            <p class="name">{{item.creator[0].userName}}</p>
          </div>
          <div class="d">

          </div>
        </table>
      </el-tab-pane>
      <el-tab-pane label="歌单" name="playlist">
        <table class="el-table">
          <div class="playlist" v-for="(item,index) in playlist" :key="index" @click="toPlaylist(item.id)">
            <img :src="item.coverImgUrl" alt="">
            <p>{{item.name}}</p>
            <p class="name">{{item.trackCount}}首</p>
            <p class="by">{{item.creator.nickname}}</p>
          </div>
          <div class="d"></div>
        </table>
      </el-tab-pane>
      <el-tab-pane label="歌词" name="lyrics">
        <table class="el-table">
          <div class="lyrics" v-for="(item,index) in lyrics" :key="index">
            <p>{{item.name}}</p>
            <p >{{item.lyrics.txt}}</p>
          </div>
          <div class="d"></div>
        </table>
      </el-tab-pane>
      
      <el-tab-pane label="用户" name="user">
        <table class="el-table">
          <div class="user" v-for="(item,index) in user" :key="index">
            <img :src="item.avatarUrl" alt="">
            <p>{{item.nickname}}</p>
          </div>
          <div class="d"></div>
        </table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
// 导入 aixos
// 单曲和专辑 用户
import axios from "axios";
export default {
  name: "result",
  data() {
    return {
      // 分类
      tag: "1",
      // 搜索结果的总数
      count: 0,
      // tab切换时 会改变的数据
      activeIndex: "songs",
      // 单曲
      single: [],
      // 歌手
      singer: [],
      // 专辑
      album: [],
      // 视频
      video: [],
      // 歌单
      playlist: [],
      // 歌词
      lyrics: [],
      
      // 用户
      user: [],
      // 总条数
      total: 0,
      // 页码
      page: 1,
      html: "",
			
    };
  },
  // 过渡器
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 18) {
        return value.slice(0, 18) + "...";
      }
      return value;
    },
  },
  // 生命周期钩子 回调函数

  // 方法
  methods: {
    handdle(row) {
      // console.log(row.id);
			this.playMusic(row.id)
    },
		// 跳转mv页面
		toMV(id){
			// console.log(id);
			this.$router.push(`/video2?q=${id}`);
		},
    // 去歌单详情页
    toPlaylist(id) {
      // 跳转并携带数据
      // console.log(id);
      this.$router.push(`/details?q=${id}`);
    },
		// 跳转歌手详情页
		toSinger(id) {
      // 跳转并携带数据
      // console.log(id);
      this.$router.push(`/singer2?q=${id}`);
    },
		// 播放歌曲
    playMusic(id) {
      axios({
        url: "https://autumnfish.cn/song/url",
        method: "get",
        params: {
          id, // id:id
        },
      }).then((res) => {
        // console.log(res.data.data[0].url);
        let url = res.data.data[0].url;
				// console.log(url);
        // console.log(11);
        // console.log(this.$parent.musicUrl);
        // 直接获取父组件，可以修改任意的值
        // this.$parent.musicUrl = url;
				this.$store.dispatch("SETMUSICURL", url);
        // this.$parent.musicUrl = url;
      });
    },
    // 页码改变事件
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // // 保存页码
      this.page = val;
      // // 重新获取数据
      // this.listData();
    },
  },
  // 侦听器
  watch: {
    activeIndex() {
      // 单曲single
      // 歌手singer
      // 专辑 album: [],
      // 视频 video: [],
      // 歌单 playlist: [],
      // 歌词 lyrics: [],
      // 主播电台 station: [],
      // 用户 user: [],
      let type = 1;
      switch (this.activeIndex) {
        case "single":
          this.num = 100;
          type = 1;
          break;
        case "singer":
          this.num = 8;
          type = 100;
          break;
        case "album":
          this.num = 20;
          type = 10;
          break;
        case "video":
          this.num = 24;
          type = 1014;
          break;
        case "playlist":
          this.num = 20;
          type = 1000;
          break;
        case "lyrics":
          this.num = 20;
          type = 1006;
          break;
       
        case "user":
          this.num = 20;
          type = 1002;
          break;
        default:
          break;
      }
      axios({
        // 请求的地址
        url: "https://autumnfish.cn/search",
        // 请求的方法
        method: "get",
        params: {
          keywords: this.$route.query.q,

          type,
          limit: this.num,
        },
      }).then((res) => {
        // console.log(res);
        if (type == 1) {
          console.log(res);
          // 单曲
          this.single = res.data.result.songs;
          //计算歌曲时间
          for (let i = 0; i < this.single.length; i++) {
            let min = parseInt(this.single[i].duration / 1000 / 60);
            let sec = parseInt((this.single[i].duration / 1000) % 60);
            if (min < 10) {
              min = "0" + min;
            }
            if (sec < 10) {
              sec = "0" + sec;
            }
            this.single[i].duration = min + ":" + sec;
          }
          // this.total = res.data.result.songCount;
          //保存总数
          this.count = res.data.result.songCount + "首单曲";
        } else if (type == 100) {
          // 歌手

          this.singer = res.data.result.artists;
          //保存总数
          this.count = res.data.result.artistCount + "位歌手";
        } else if (type == 10) {
          // 专辑
					console.log(res);
          this.album = res.data.result.albums;
          this.count = res.data.result.albumCount + "张专辑";
        } else if (type == 1014) {
          // 视频
					// console.log(res);
          this.video = res.data.result.videos;
          this.count = res.data.result.videoCount + "个视频";
        } else if (type == 1000) {
          // 歌单
          this.playlist = res.data.result.playlists;
          this.count = res.data.result.playlistCount + "个歌单";
        } else if (type == 1006) {
          // 歌词
          // console.log(res.data.result.songs);
          this.lyrics = res.data.result.songs;
          // this.html=res.data.lyrics.renge.txt;
          this.count = res.data.result.songCount + "首歌词";
        } else if (type == 1002) {
          // 用户

          this.user = res.data.result.userprofiles;
          this.count = res.data.result.userprofileCount + "位用户";
        }
      });
    },
  },
};
</script>
<style scoped>
/* 单曲 */
.result-container {
  position: absolute;
  top: 130px;
  left: 200px;
}
.items img {
  width: 100px;
  height: 100px;
}

.tab-bar .item {
  cursor: pointer;
  margin: 10px 15px;
}
.active {
  color: red;
}
.song-wrap {
  display: flex;
  width: 1200px;

  font-size: 16px;
}

.song-wrap .name-wrap {
  line-height: 30px;
}
.el-table__row {
  height: 30px;
  width: 1200px;
}
.el-table .d {
  height: 100px;
}
/* 歌手 */
.singer {
  display: flex;
  width: 1200px;
  height: 80px;
}
.singer img {
  width: 60px;
  height: 60px;
}
.singer p {
  line-height: 60px;
}
.singer .d {
  height: 100px;
}
/* 专辑 */
.album {
  display: flex;
  width: 1200px;
  height: 80px;
}
.album img {
  width: 60px;
  height: 60px;
}
.album p {
  line-height: 60px;
  margin-left: 10px;
}
.album .d {
  height: 1000px;
}
.album .name {
  position: absolute;
  left: 600px;
}
/* 视频 */
/* .video {
  display: flex;
  width: 1200px;
  height: 80px;
} */
.el-table .video {
  width: 300px;
  display: inline-block;
  margin: 10px;
}
.video img {
  width: 300px;
  height: 160px;
  text-align: center;
}
/* 歌单 */
.playlist {
  display: flex;
  width: 1200px;
  height: 80px;
}
.playlist img {
  width: 60px;
  height: 60px;
}
.playlist p {
  line-height: 60px;
  margin-left: 10px;
}
.playlist .d {
  height: 1000px;
}
.playlist .name {
  position: absolute;
  left: 600px;
}
.playlist .by {
  position: absolute;
  left: 700px;
}
/* 歌词 */
/* .lyrics {
} */
/* 主播电台 */
.station {
  display: flex;
  width: 1200px;
  height: 80px;
}
.station img {
  width: 60px;
  height: 60px;
}
.station p {
  line-height: 60px;
  margin-left: 10px;
}
.station .d {
  height: 1000px;
}
.station .name {
  position: absolute;
  left: 600px;
}
.station .by {
  position: absolute;
  left: 700px;
}
/* 用户 */
.user {
  display: flex;
  width: 1200px;
  height: 80px;
}
.user img {
  width: 60px;
  height: 60px;
}
.user p {
  line-height: 60px;
  margin-left: 10px;
}
.user .d {
  height: 1000px;
}
.user .name {
  position: absolute;
  left: 600px;
}
.user .by {
  position: absolute;
  left: 700px;
}
</style>
